
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js" ></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js" ></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js" ></script>

<style type="text/css">
body {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: "Microsoft Yahei";
}
#tabletr tr {
    background: #f5f5f5;
}
#tabletr tr td{border:1px solid #ddd}
#tabletr tr td{border-top: 1px solid #ddd;}
.text{height:26px;margin-left:10px;border:1px solid #ccc;border-radius:4px;width:200px;padding-left:1em}
table{ margin-top:4em}
#tabletr tr:hover{ background:#ddd}
#tabletr a{color:#505f91}
p{word-wrap:break-word;word-break:break-all;overflow: hidden;}


.bounce{display:block;height:100%; }
.bounce :nth-child(1) {
    animation-delay: -.576s;
}
.bounce :nth-child(2) {
    animation-delay: -.552s;
}
.bounce :nth-child(3) {
    animation-delay: -.528s;
}
.bounce :nth-child(4) {
    animation-delay: -.504s;
}
.bounce :nth-child(5) {
    animation-delay: -.480s;
}
.bounce span{
    display: inline-block;
    animation-duration: .3s;
    animation-name: bounce-wave;
    animation-iteration-count: infinite;
    animation-direction: alternate;}

@keyframes bounce-wave {
	from {
		transform: translateY(5px);
	}

	to {
		transform: translateY(-5px);
	}
}	
</style>
</head>
<body>

<div  class="tabletr">


<div style="position:fixed;top:0px;left:0px; width:100%; background-color:#FFF"><!--v-on:change="upfile()" -->
<div style=" margin:10px auto;width:90%">
<a href="javascript:;" style="background-color:#f1f2f6;
    border: 1px solid #505f91;white-space: nowrap;border-radius: 4px;font-size: 14px;padding:2px 10px;
    color: #505f91;text-decoration: none;" title="导入文件" v-on:click="$.vue.$refs.tfile.click()">导入文件</a>
    <input id="userFile" name="userFile" type="file" accept="*
    " multiple v-on:change="action()" ref="tfile" style="display:none">
    已选择{{filelist.length}}个文件，
    <span style="color:green" >上传成功{{filelistyes.length}}个文件</span>，
    <span style="color:red" >上传失败{{filelistno.length}}个文件</span>
</div>
    <table width="90%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;background:#7c87ad;color:#FFF;border-collapse: collapse;">
      <tr height="35">
        <td  align="center" width="80%">文件名
        </td>
         <td  align="center" width="20%" style="position:relative;overflow:hidden">
        状态
        </td>

      </tr>

    </table>
</div>
       
<table width="90%" border="0" cellpadding="0" cellspacing="0" style="margin:0px auto;margin-top:75px;border-collapse: collapse;" id="tabletr" >

  <tr height="35" v-for="(the,$index) in filelist" >
    
    <td  align="center" width="80%"><span v-text="the.file.name"></span></td>
    <td  align="center" width="20%" >
        <span v-if="the.filestate==0">等待上传</span>
        
        <div class="bounce" v-if="the.filestate==1"><span>上</span><span>传</span><span>中</span><span>.</span><span>.</span></div>
        
        <span style="color:green" v-if="the.filestate==2">上传成功</span>
        
        <span style="color:red" v-if="the.filestate==3">上传失败</span>
        
        <a href="javascript:;" v-on:click="the.filestate=0" v-if="the.filestate==3" >重传</a>
    </td>
    
    </tr>
    
</table>
</div>

</body>
</html>
<script type="text/javascript" >

$(function(){
	window.uploadFile =function(pram)
	{
			return $.ajax({
				url: "{:U('Examination/uploadFile')}",
				timeout:120000,
				global:false,
				data: pram, //发送数据
				async: true, // 是否异步
				processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
				contentType: false //
			});
	}
	
	$.$tabletr = new Vue({
	  el: '.tabletr',
	  data: {
		  filelist:[],
		  height:$(document).height(),
		  examination_id:1,
	  },
	 created:function()
		{
			$.vue=this;
		},
		computed:{
		    filelistyes:function(){
					var ok=this.filelist.filter(function(a){
						return a.filestate==2
					})
					return ok
			},
		    filelistno:function(){
					var no=this.filelist.filter(function(a){
						return a.filestate==3
					})
					return no
			}
		},
	   watch: 
	   {
		   filelist: {
                handler: function (newVal, oldVal) {
                   var length=newVal.filter(function (x) {
						 return x.filestate==1;
					})
					if(length.length<2){$.vue.uploadb(newVal);}
					
					if(length.length==2)
					{
						if($(".bounce:last").length)
						{
							$(document).scrollTop( $(".bounce:last").offset().top-$.vue.height/3 );
							
						}
					}
                },
                deep: true
            }
		},
		mounted:function()
		{
			//查询filestate有多少个0，大于1个就是将其索引
		},
		methods:
		{
			action:function()
			{
				for(var item in $.vue.$refs.tfile.files)
				{
					if( item-0 === item-0 )
					{
						var file=$.vue.$refs.tfile.files[item];
						$.vue.filelist.push({file:file,filestate:0})
					}
					
				}
			},
			uploadb:function(curVal)
			{
				    var files=null;
					//等待上传的$.vue.$refs.tfile.files[i]
					for(i=0;i<curVal.length;i++)
					{
						if(curVal[i].filestate==0){files=curVal[i];break;}
					}
					
					if(!files){return;}
					
					files.filestate=1;
					var formData = new FormData();
					formData.append("examination_id",$.vue.examination_id);
					formData.append("file",files.file);
					
					setTimeout(function(){
						files.filestate=Math.round(Math.random()*1)+2;
						
						},Math.round(Math.random()*3000)+2000)
//					uploadFile(formData).always(function(data){
//							if((data||{}).result==1)
//							{files.filestate=2;}
//							else              
//							{files.filestate=3;}
//						})
		
			},
			
		}
		
	})

})
</script>
